import React,{ Component } from 'react'
import { unmountComponentAtNode } from 'react-dom'


// 类组件
// export default class Demo extends Component {
//   state = {
//     count: 0,
//     name: "rollingball"
//   }

//   myRef = React.createRef()

//   add = ()=>{
//     this.setState((state) => {return {count: state.count+1}})
//   }

//   componentDidMount(){
//     this.timer = setInterval(()=>{
//       this.setState((state) => {return {count: state.count+1}})
//     },1000)
//   }

//   componentWillUnmount(){
//     clearInterval(this.timer)
//   }

//   unmount = ()=>{
//     unmountComponentAtNode(document.getElementById("root"))
//   }

//   show = ()=>{
//     alert(this.myRef.current.value)
//   }

//   render() {
//     return (
//       <div>
//         <h2>当前数字:{this.state.count}</h2>
//         <button onClick={this.add}>cilck +1</button>
//         <button onClick={this.unmount}>点击卸载组件</button>
//         <br/>
//         <input type="text" ref={this.myRef} onBlur={this.show} />
//       </div>
//     )
//   }
// }



// 函数式组件
export default function Demo() {
  const [count, setCount] = React.useState(0)
  const [name, setName] = React.useState("rollingball")

  // 组件挂载后开启定时器；[]内的组件更新后调用该回调函数；组件卸载前清除定时器
  React.useEffect(()=>{
    let timer = setInterval(()=>{
      setCount(count => count+1)
    },1000)
    return ()=>{
      clearInterval(timer)
    }
  },[])

  // ref
  const myRef = React.useRef()

  // 点击加一
  function add(){
    // setCount(count+1)
    setCount(count => count+1)
  }

  // 改名
  function handleChange(e){
    setName(e.target.value)
  }

  // 点击卸载组件
  function unmount(){
    unmountComponentAtNode(document.getElementById("root"))
  }

  // 失焦展示数据
  function show(){
    alert(myRef.current.value)
  }

  return (
    <div>
      <h2>当前求和为：{count}</h2>
      <button onClick={add}>click + 1</button>
      <h2>你的名字：{name}</h2>
      <input type="text" onBlur={handleChange} placeholder="失焦时改名"/>
      <br/>
      <button onClick={unmount}>卸载组件</button>
      <br />
      <input type="text" ref={myRef} onBlur={show} placeholder="失焦展示数据"/>
    </div>
  )
}

